<template>
  <el-form ref="menuForm" :model="dbForm" label-width="120px" size="small" style="height: 100%; display: flex;flex-direction: column;">
    <el-row>
      <el-col :span="12">
        <el-form-item label="数据库名称：">
          <el-input v-model="dbForm.name" placeholder="请输入数据库名称"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="描述信息：">
          <el-input v-model="dbForm.description" placeholder="请输入描述信息:"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20">
        <el-form-item label="数据库连接：">
          <el-select v-model="dbForm.connectionId" placeholder="请选择数据库连接">
            <el-option v-for="(item, index) in connList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20">
        <el-form-item label="数据库类型：">
          <el-select v-model="dbForm.type" placeholder="请选择数据库类型">
            <el-option v-for="(item, index) in dbTypeList" :key="item.code" :label="item.name"
                       :value="item.code"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20">
        <el-form-item label="删除已存在: ">
          <el-switch v-model="dbForm.deleteExist">
          </el-switch>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row style="margin-top: auto">
      <el-col :span="23">
        <el-form-item style="display: flex;justify-content: flex-end;">
          <el-button size="small" @click="cancelHandler">取 消</el-button>
          <el-button type="primary" size="small" @click="confirmHandler" style="margin-left: 20px;">确 认</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { $DataSourceApi } from "@/network/datasource/DataSourceApi";
import { $DatabaseApi } from "@/network/datasource/DatabaseApi";

export default {
  props: {
    afterConfirmClick: {
      type: Function
    }
  },
  data() {
    return {
      dbForm: {
        name: '',
        description: '',
        connectionId: '',
        deleteExist: false,
      },
      connList: [],
      dbTypeList: [],
    }
  },
  methods: {
    async getConnectionList() {
      const res = await $DataSourceApi.list();
      this.connList = res.data;
    },

    async getDbTypeList() {
      const res = await $DatabaseApi.getDbTypeList();
      this.dbTypeList = res.data;
    },

    async confirmHandler() {
      const data = { ...this.dbForm };
      const res = await $DatabaseApi.createDatabase(data);
      this.ShowMessage(res);
      this.$bus.$emit('confirm-click');
    },

    cancelHandler() {

    }

  },

  created() {
    this.getConnectionList();
    this.getDbTypeList();
  }

}
</script>
<style>
</style>